<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <base href="https://biadmindev.oristarcloud.com/dw-api-core/js/plugin/viz/">
    <title>流程图</title>
    <style>
#app{display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column;position:absolute;top:0;left:0;width:100%;height:100%}
#header{flex:0 0 auto;-webkit-flex:0 0 auto;line-height:1.3}
#panes{display:flex;display:-webkit-flex;flex:1 1 auto;-webkit-flex:1 1 auto}
#graph{display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column}
#options{flex:0 0 auto;-webkit-flex:0 0 auto}
#output{flex:1 1 auto;-webkit-flex:1 1 auto;position:relative;overflow:auto}
#editor{border-right:1px solid #ccc}
#header{background:#eee;border-bottom:1px solid #ccc;padding:8px;text-align:center}
#header b{font-size:18px}
#header input{width:20%; min-width:20em;}
#options{background:#eee;border-bottom:1px solid #ccc;padding:8px}
#options label{margin-right:8px}
#options #raw.disabled{opacity:.5}
#output svg{position:absolute;top:0;left:0;width:100%;height:100%}
#output #text{font-size:12px;font-family:monaco,courier,monospace;white-space:pre;position:absolute;top:0;left:0;width:100%;height:100%;overflow:auto}
#output img{display:block;margin:0 auto}
#output.working svg,#output.error svg,#output.working #text,#output.error #text,#output.working img,#output.error img{opacity:.4}
#output.error #error{display:inherit}
#output #error{display:none;position:absolute;top:20px;left:20px;margin-right:20px;background:red;color:white;z-index:1}
.gutter{background-color:#eee;background-repeat:no-repeat;background-position:50%}
.gutter.gutter-horizontal{background-image:url('');cursor:ew-resize}
.split{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;overflow-y:auto;overflow-x:hidden}
.split.split-horizontal,.gutter.gutter-horizontal{height:100%;float:left}
    </style>
</head>
<body>
<!-- TODO 时序图 https://www.websequencediagrams.com/ -->
<div id="app">
    <div id="header">
        <label id="table_label">表名:<input id="table" name="table"/></label>
        <label id="exclude_label">排除(库/表):<input id="exclude" name="exclude"/></label>
        <button class="btn btn-success btn-xs translate depend">查依赖</button>
        <button class="btn btn-success btn-xs translate reference">查引用</button>
        <button class="btn btn-success btn-xs translate all">查依赖引用</button>
        <button class="btn btn-success show_desc btn-xs">查字段</button>
        <button class="btn btn-success btn-xs goback">后退</button>
    </div>
    <div id="panes" class="split split-horizontal">
        <div id="editor" class="split"># 语法教程 https://www.jianshu.com/p/e44885a777f0
digraph G {
            graph[shape="box" fontsize=10 rankdir=LR]
            node[shape="box"  fontsize=10 color="black" bgcolor="red" distortion=.7]
            edge[fontsize=10 fontcolor="black" color="brown" style="filled"]

            // VIZ TEMPLATE
}
        </div>
        <div id="editor_template" style="display:none;"># 语法教程 https://www.jianshu.com/p/e44885a777f0
digraph G {
    graph[shape="box" fontsize=10 rankdir=LR]
    node[shape="box"  fontsize=10 color="black" bgcolor="red" distortion=.7]
    edge[fontsize=10 fontcolor="black" color="brown" style="filled"]

// VIZ
}
        </div>
        <div id="graph" class="split">
            <div id="options">
                <label id="show_source">
                    <input type="checkbox" name="show_source">显示流程图源码
                </label>

                <label id="engine">
                    渲染引擎:
                    <select>
                        <option>circo</option>
                        <option selected>dot</option>
                        <option>fdp</option>
                        <option>neato</option>
                        <option>osage</option>
                        <option>twopi</option>
                    </select>
                </label>

                <label id="rankdir">
                    <input type="checkbox" name="rankdir" >横竖切换
                </label>

                <label id="format">
                    格式:
                    <select>
                        <option selected>svg</option>
                        <option value="png-image-element">png</option>
                        <option>json</option>
                        <option>xdot</option>
                        <option>plain</option>
                        <option>ps</option>
                    </select>
                </label>

                <label id="raw">
                    <input type="checkbox">xml
                </label>
            </div>
            <div id="output">
                <div id="error"></div>
            </div>
        </div>
    </div>
</div>

<script src="./bower_components/ace.js"></script>
<script src="./bower_components/viz.js"></script>
<script src="./bower_components/fabric.min.js"></script>
<script src="./bower_components/split.min.js"></script>
<script src="./bower_components/svg-pan-zoom.min.js"></script>
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../../sybn_common.js"></script>
<script type="text/javascript" src="./viz_template.js"></script>

</body>
<script>
var backList = [];
window.onload = function() {
  updateGraph();

  var exclude = getQueryString("exclude");
  if (exclude) {
    $('[name=exclude]').val(exclude);
  }

  var table = getQueryString("table");
  if (table) {
    $('[name=table]').val(table);
    backList.push($('#table').val());
    translate();
  }

  $('.CodeMirror').addClass("form-control");
  // 查询
  $('body').on('click', 'button', function(e){
    if(backList[backList.length-1] != $('#table').val()) {
        backList.push($('#table').val());
    }
    translate(e, this);
  });
  // 横纵转换
  $('body').on('click', '[name=rankdir]', ()=>{
    var s = editor.getValue();
    if ($('[name=rankdir]').is(":checked")){
        s = s.replace("rankdir=LR", "rankdir=TB");
    } else {
        s = s.replace("rankdir=TB", "rankdir=LR");
    }
    editor.setValue(s);
  });
  // 显示/隐藏源码
  $('body').on('click', '[name=show_source]', ()=>{
     toggleSource();
  });
  toggleSource();

  // 查看表结构
  $('body').on('click', 'button.show_desc', function(){
	var table = $('[name=table]').val();
	if (table) {
        var url = "/dw-api-core/sql_frame.html?sql=show%20desc%20columns%20" + table;
        window.open(url, "_blank");
    }
  });
  // 返回
  $('body').on('click', 'button.goback', function(){
    if (backList.length > 1 && backList[backList.length-2]) {
        var v = backList[backList.length-2];
        backList.pop();
		$('[name=table]').val(v);
		translate();
    }
    return false;
  });
  // 实现双击跳转效果
  $('body').on('dblclick', 'g.node', function(x){
    // copyText(x.currentTarget);
    var title = $(x.currentTarget).find("title");
    if (title && title.length==1) {
        var table = title.text().replace("__", ".");
        if (backList[backList.length-1] != table) {
          $('#table').val(table);
          $("button.all").click();
        }
    }
    return false;
  });
};

// 显示/隐藏 源码窗口
function toggleSource() {
    if ($('[name=show_source]').is(":checked")){
        $('#editor').show();
        $('.gutter-horizontal').show();
        var $g = $('#graph');
        $g.attr('style', $g.attr('style2'));
    } else {
        $('#editor').hide();
        $('.gutter-horizontal').hide();
        var $g = $('#graph');
        $g.attr('style2', $g.attr('style'));
        $g.attr('style', 'width:100%');
    }
}

// 查询数据
function translate(e, _this) {
	var table = $('[name=table]').val();
	var exclude = $('[name=exclude]').val();
	if (!table) {
	  return;
	}
	$this = $(_this) || $(this);
	var reference = $this && $this.hasClass("reference");
	var all = $this && $this.hasClass("all");
	var depend = $this && $this.hasClass("depend");
	var action = getQueryString("action");
	var type = (reference?'select':(all?'all':(depend?'insert':action)));

    var url2 = changeURLPar(window.location.href.toString(), "table", table);
    url2 = changeURLPar(url2, "action", type);
    window.history.pushState({},0,url2);

	// 防止双击触发单击
	$.ajax({
	     url: "../../../api/viz/translate.json",
	     type:'post',
	     dataType:'json',
	     async:true,//异步请求
	     cache:false,
	     data: {table:table, type: type, exclude: exclude},
	     //执行成功的回调函数
	     success:function(data) {
	      	  if (data.status && data.status >= 400){
	      	    alert(data.message ? "操作失败: " + data.message : "操作失败!");
	      	  } else if (!data.result){
	      	    alert(data.msg ? "操作失败: " + data.msg : "操作失败!");
	      	  } else {
	      	    var s = $("#editor_template").text();
	      	    if ($('[name=rankdir]').is(":checked")){
	      	        s = s.replace("rankdir=LR", "");
	      	    }
	      	    s = s.replace("// VIZ TEMPLATE", data.output);
                editor.setValue(s);
	          }
	     },
	     //执行失败或错误的回调函数
	     error:function(data) {
	         alert("操作失败");
	     }
	});
}

</script>
</html>
